<template>
  <div>
    <el-row>
      <h5>{{ data.title }}</h5>
    </el-row>
    <el-row>
      <el-form label-width="100px" label-position="top" style="flex: auto;">
        <el-form-item label="表单抬头字段" align="left">
          <checked-prop :options="data.headOptions"  @change="headerCheckedChange"/>
        </el-form-item>
        <el-form-item label="表单指标"  align="left">
          <checked-prop :options="data.codeOptions"  @change="coderCheckedChange"/>
        </el-form-item>
        <el-form-item label="表单结尾字段"  align="left">
          <checked-prop :options="data.endOptions"  @change="enderCheckedChange"/>
        </el-form-item>
        </el-form>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue} from 'vue-property-decorator';
import CheckedProp from '@/components/CheckedProp.vue';

@Component({
  components: { CheckedProp }
})
export default class ExportSelector extends Vue {
 @Prop() data:any;

  headerCheckedChange(val:any){
    this.data.headOptions.checkedValues = val;
  }

  coderCheckedChange(val:any){
    this.data.codeOptions.checkedValues  = val;
  }

  enderCheckedChange(val:any){
    this.data.endOptions.checkedValues = val;
  }
}
</script>
<style lang="scss" scoped>

</style>
